<template>
  <view class="doc-container">
    <view class="doc-item">
      <view class="label">1.按钮 参数：type\size\status</view>
      <view class="title">基本用法(primary、plain、model 支持点击效果)</view>
      <view class="button-view">
        <ve-button type="primary">primary</ve-button>
        <text>·</text>
        <ve-button type="plain">plain</ve-button>
        <text>·</text>
        <ve-button>default</ve-button>
      </view>
      <!-- <text>·</text>
      <ve-button>default</ve-button>
      <text>·</text>
      <ve-button type="danger">danger</ve-button> -->

      <view class="title">按钮尺寸(default、mini、long)</view>
      <view class="button-view">
        <ve-button size="default" type="primary">default</ve-button>
        <text>·</text>
        <ve-button size="default" type="plain">default</ve-button>
        <text>·</text>
        <ve-button size="default">default</ve-button>
        <text>·</text>
        <ve-button size="mini" type="primary">mini</ve-button>
        <text>·</text>
        <ve-button size="mini" type="plain">mini</ve-button>
        <!-- <text>·</text>
        <ve-button size="mini" type="danger">mini</ve-button> -->
        <text>·</text>
        <ve-button size="mini">mini</ve-button>
        <text>·</text>
        <ve-button type="primary" size="long" :loading="true">long</ve-button>
        <text>·</text>
        <ve-button type="plain" size="long" :loading="true">long</ve-button>
        <text>·</text>
        <ve-button size="long" :loading="true">long</ve-button>
      </view>

      <view class="title">禁用状态</view>
      <view class="button-view">
        <ve-button size="mini" type="primary" disabled>primary</ve-button>
        <text>·</text>
        <ve-button size="mini" type="plain" disabled>plain</ve-button>
        <!-- <text>·</text>
        <ve-button size="mini" type="danger" disabled>mini</ve-button> -->
      </view>
      <view class="title"> 按钮状态(primary、plain 支持 success | warning | danger | gray，但不支持点击效果) </view>
      <view class="button-view">
        <!-- <ve-button type="primary" status="success">primary</ve-button>
        <text>·</text> -->
        <!-- <ve-button type="plain" status="success" :loading="true">plain</ve-button>
        <ve-button type="plain" status="warning" :loading="true">plain</ve-button> -->
        <ve-button type="plain" status="danger">plain</ve-button>
        <text>·</text>
        <ve-button type="plain" status="gray">plain</ve-button>
      </view>

      <view class="title">图标按钮</view>
      <view class="button-view">
        <ve-button size="mini" type="primary">
          <template #icon>
            <text class="iconfont ve-icon-add"></text>
          </template>
          Plus
        </ve-button>
      </view>
    </view>

    <view class="doc-item">
      <view class="label">2.标签页</view>
      <ve-tabs :showBorder="true" :actived="0" :list="tabs" @change="tabsChange" :style="{ background: '#fff' }"></ve-tabs>
      <ve-tabs :actived="0" :list="tabs" @change="tabsChange"></ve-tabs>
    </view>

    <view class="doc-item">
      <view class="label">3.底部选择</view>
      <ve-button @click="showPicker = true">开启</ve-button>
      <ve-picker-inline
        title="请选择"
        v-model="showPicker"
        :list="[
          { key: 1, title: '第一个选项' },
          { key: 2, title: '第二个选项' },
        ]"
        @confirm="pickerConfirm"
      ></ve-picker-inline>
    </view>

    <view class="doc-item">
      <view class="label">4.弹框</view>
      <ve-button @click="visible = true">开启</ve-button>
      <ve-modal title="标题" v-model="visible">
        <image src="https://testimage.qichengcx.com/www/images/scooter/index_bg_v1.png" mode="widthFix"></image>
      </ve-modal>
    </view>

    <view class="doc-item">
      <view class="label">5.二次确认</view>
      <ve-button @click="confirmVisible = true">开启</ve-button>
      <ve-confirm titleText="是否作废该条结算单？" v-model="confirmVisible"> 作废后将无法恢复！ </ve-confirm>
    </view>

    <view class="doc-item">
      <view class="label">6.卡片 灰色（默认）、蓝色、红色、黄色</view>
      <ve-card title="默认卡片">
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell label="用户名用户名">{{ username }}</ve-cell>
        <ve-cell label="用户名用户名用户名" priceAlign="right">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100" priceAlign="right"></ve-cell-price>
      </ve-card>

      <view class="title">对齐方式: left、right</view>
      <ve-card title="默认卡片">
        <ve-cell label="用户名用户名用户名" priceAlign="right">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100" priceAlign="right"></ve-cell-price>
      </ve-card>

      <ve-card title="默认卡片">
        <template #status>
          <view class="card__status">已完成</view>
        </template>
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell label="用户名用户名">{{ username }}</ve-cell>
        <ve-cell label="用户名用户名用户名">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100"></ve-cell-price>
        <template #footer>
          <view class="card-footer">
            <ve-button type="plain" size="mini">取消</ve-button>
            <ve-button type="primary" size="mini">确认</ve-button>
          </view>
        </template>
      </ve-card>
      <ve-card title="默认收起卡片" type="none" fold="true" v-model:initFold="initFold">
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100"></ve-cell-price>
      </ve-card>
      <ve-card title="默认展开卡片" type="none" fold="true" v-model:initFold="initExpand">
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell label="附件" layout="vertical">
          <ve-upload disabled v-model="imgList" max-count="4" @change="uploadChange"></ve-upload>
        </ve-cell>
      </ve-card>
      <ve-card>
        <ve-cell-price label="待收费用" :value="100"></ve-cell-price>
        <ve-cell label="垂直布局" layout="vertical">
          <ve-upload disabled v-model="imgList" @change="uploadChange"></ve-upload>
        </ve-cell>
      </ve-card>
      <ve-card title="蓝色头部卡片" sub-title="已认证" type="blue">
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100"></ve-cell-price>
      </ve-card>
      <ve-card title="红色头部卡片" sub-title="已认证" type="red">
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100"></ve-cell-price>
      </ve-card>
      <ve-card title="黄色头部卡片" sub-title="已认证" type="yellow">
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100"></ve-cell-price>
      </ve-card>
      <ve-card title="灰色头部卡片" sub-title="正常" type="gray">
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell label="用户名">{{ username }}</ve-cell>
        <ve-cell-price label="待收费用" :value="100"></ve-cell-price>
        <ve-cell-price label="0元" :value="0"></ve-cell-price>
        <ve-cell-price label="空值" :value="ddddddddd_null_val"></ve-cell-price>
        <template #footer>
          <view class="card-footer">
            <ve-button type="plain" size="mini" status="gray">取消</ve-button>
            <ve-button type="plain" size="mini">确认</ve-button>
          </view>
        </template>
      </ve-card>
    </view>

    <view class="doc-item">
      <view class="label">7.空占位 order、bill、store、member</view>
      <ve-empty :margin-top="0" text="门店还没有订单哦~"></ve-empty>
      <ve-empty type="network" text="没有网络"></ve-empty>
      <ve-empty type="auth" text="没有权限"></ve-empty>
    </view>

    <view class="doc-item">
      <view class="label">8.搜索栏，0、1、2个下拉</view>
      <ve-search-bar placeholder="请输入用车人姓名" @search="searchBarSearch"></ve-search-bar>
      <ve-search-bar :showBorder="true" :list="[{ prop: 'username', label: '用户名' }]" @search="searchBarSearch"></ve-search-bar>
      <ve-search-bar
        :list="[
          { prop: 'username', label: '用户名' },
          { prop: 'phone', label: '手机号' },
        ]"
        @search="searchBarSearch"
      ></ve-search-bar>
    </view>

    <view class="doc-item">
      <view class="label">9.照片上传/查看</view>
      <ve-upload v-model="imgList" @change="uploadChange"></ve-upload>
      <ve-upload disabled v-model="imgList" @change="uploadChange"></ve-upload>
    </view>
    <view class="doc-item">
      <view class="label">10.分段器</view>
      <ve-subsection :list="subsectionList" :current="1"> </ve-subsection>
    </view>

    <!-- loading -->
    <view class="doc-item">
      <view class="label">11.loading</view>
      <ve-loading v-model="loadingShow"></ve-loading>
      <ve-button type="primary" @click="openLoading">loading</ve-button>
    </view>

    <!-- form/form-item -->
    <view class="doc-item">
      <view class="label">12.form/form-item</view>
      <ve-button type="primary" @click="toFormPage">跳转</ve-button>
    </view>

    <view class="doc-item">
      <view class="label">13.步骤条</view>
      <ve-steps :list="stepList1" :active="0"></ve-steps>
      <ve-steps :list="stepList2" :active="1"></ve-steps>
      <ve-steps :list="stepList2" :active="2"></ve-steps>
    </view>
    <view class="doc-item">
      <view class="label">14.日历</view>
      <ve-button @click="nextMthClickFn">下一个月</ve-button>
      <ve-calendar ref="veCalendarRef" initTime="2023-03-01" :pricelist="pricelist" :cellheader="false">
        <template #cell-header="{ date }">
          {{ date }}
          日历自定义头部
        </template>
      </ve-calendar>
      <ve-calendar initTime="2023-02-11 10:0:0"></ve-calendar>
    </view>
    <view class="doc-item">
      <view class="label">15.svg图标使用</view>
      <view>APP无法使用，作废</view>
    </view>
    <view class="doc-item">
      <view class="title">15.img图标使用</view>
      <text v-for="it in icons" :key="it">
        <ve-icon :name="it" size="64" />
        <text>&nbsp;</text>
      </text>
    </view>
    <view class="doc-item">
      <view class="title">15.iconfont图标使用</view>
      <view class="iconfont-box">
        <text class="iconfont ve-icon-add_btn"></text>
        <text class="iconfont ve-icon-eye_open"></text>
        <text class="iconfont ve-icon-arrow_right"></text>
        <text class="iconfont ve-icon-add"></text>
        <text class="iconfont ve-icon-no-check" style="color: #fff"></text>
        <text class="iconfont ve-icon-ic_checkbox_line" style="color: gray"></text>
        <text class="iconfont ve-icon-checked-nocolor" style="color: blue"></text>
        <text class="iconfont ve-icon-close"></text>
        <text class="iconfont ve-icon-user"></text>
        <text class="iconfont ve-icon-reduce"></text>
        <text class="iconfont ve-icon-delete"></text>
        <text class="iconfont ve-icon-job"></text>
        <text class="iconfont ve-icon-search"></text>
        <text class="iconfont ve-icon-arrow_left"></text>
        <text class="iconfont ve-icon-arrow_top"></text>
        <text class="iconfont ve-icon-warning"></text>
        <text class="iconfont ve-icon-help"></text>
        <text class="iconfont ve-icon-eye_close"></text>
        <text class="iconfont ve-icon-tel"></text>
        <text class="iconfont ve-icon-tel_1"></text>
      </view>
    </view>
    <view class="doc-item">
      <view class="label">16.日期选择器</view>
      <ve-form-item label="日期">
        <ve-date-picker v-model="timeValue" mode="datetime" />
      </ve-form-item>
      <ve-daterange-picker
        v-model:start="startTime"
        v-model:end="endTime"
        mode="datetime"
        format="YYYY-MM-DD HH:mm"
        @confirm="confirm"
        :title="{
          start: '开始时间',
          end: '结束时间',
        }"
      ></ve-daterange-picker>
    </view>
    <view class="doc-item">
      <view class="label">17.Radio</view>
      <ve-radio v-model="memberType" :list="radiolist" @confirm="radioconfirm"></ve-radio>
      <ve-radio v-model="memberType1" :disabled="true" :list="radiolist1" @confirm="radioconfirm"></ve-radio>
    </view>
    <view class="doc-item">
      <view class="label">18.Checkbox</view>
      <view class="checkbox-box">
        check组：
        <ve-checkbox-group @change="checkboxGroupChange">
          <ve-checkbox v-for="item in checkList" :key="item.name" v-model="item.checked" :name="item.name">
            {{ item.name }}
          </ve-checkbox>
        </ve-checkbox-group>
      </view>
      <view> 单独使用： <ve-checkbox v-model="checkboxValue"> 选择框 </ve-checkbox> </view>
    </view>
    <view class="doc-item">
      <view class="label">19.文件上传</view>
      <ve-upload-file :fileList="fileList" @change="uploadChangefile"></ve-upload-file>
    </view>
    <view class="doc-item">
      <view class="label">20.圆角标签（缺少的自己加）</view>
      <ve-tag style="margin-right: 10rpx" v-for="(color, index) of colors" :key="index" :color="color" :title="color + '色'"> </ve-tag>

      <ve-tag color="red" plain title="镂空标签"> </ve-tag>
      <ve-tag color="#3072f6" background="#fdff1e" plain title="自定义颜色"></ve-tag>
    </view>

    <view class="doc-item">
      <view class="label">21.吐司</view>
      <ve-button size="mini" @click="showToast">默认</ve-button>
      <ve-button size="mini" @click="showLoadingToast">Loading</ve-button>.
      <ve-button size="mini" @click="showToast1">成功\警告\危险</ve-button>
      <ve-toast ref="toast" />
    </view>

    <view class="doc-item">
      <view class="label">22.tooltip</view>
      <ve-gap size="80"></ve-gap>
      <ve-tooltip content="白日依山尽，黄河入海流">
        <ve-icon name="help" color="rgba(22, 93, 255, 1)" size="64" />
      </ve-tooltip>
    </view>

    <view class="doc-item">
      <view class="label">23.底部box</view>
      <ve-bottom-box size="mini">
        <ve-button>取消</ve-button>
        <ve-button type="primary">确定</ve-button>
      </ve-bottom-box>
    </view>
    <ve-gap size="160"></ve-gap>
  </view>
</template>

<script>
  // #ifdef H5
  // const svgImport = import.meta.glob('./../../static/svg/**/*.svg')
  const iconsImport = import.meta.glob('./../../static/icons/**/*.png')
  // const svgList = Object.keys(svgImport).map((it) => it.split('/').at(-1).replace('.svg', ''))
  const iconList = Object.keys(iconsImport).map((it) => it.split('/').at(-1).replace('.png', ''))
  // #endif

  export default {
    data() {
      return {
        initExpand: true,
        initFold: false,
        timeValue: '2023-09-14 14:17:45',
        startTime: '',
        endTime: '',
        colors: ['blue', 'red', 'orange'],
        showPicker: false,
        visible: false,
        checkboxValue: true,
        checkList: [
          {
            name: '香蕉',
            checked: false,
            disabled: false,
          },
          {
            name: '苹果',
            checked: false,
            disabled: false,
          },
          {
            name: 'orange',
            checked: false,
            disabled: false,
          },
          {
            name: 'orange',
            checked: false,
            disabled: false,
          },
          {
            name: 'orange',
            checked: false,
            disabled: false,
          },
        ],
        list: [
          {
            left: '姓名',
            right: '李张王',
          },
          {
            left: '身份证号',
            right: '131082199906060606',
          },
        ],
        tabs: ['待收货1', '待收货2', '待收货3', '待收货4', '待收货5', '待收货6', '待收货7', '待收货8'],
        subsectionList: [
          {
            name: '待发货',
          },
          {
            name: '待付款',
          },
          {
            name: '待评价',
          },
        ],
        imgList: [
          {
            img: 'https://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/06/56/14_avatar_max.jpg',
          },
        ],
        confirmVisible: false,
        loadingShow: false,
        username: '上将-邢道荣-邢道荣-邢道荣-邢道荣-邢道荣',
        repairList: [
          { value: 10, label: '张三维修店' },
          { value: 20, label: '李四维修店' },
          { value: 30, label: '王五维修店' },
        ],
        timevisible: false,
        stepList1: ['续租信息', '续租费用信息'],
        stepList2: ['换下车信息', '换上车信息', '换车费信息'],
        pricelist: [230, 3800, 99, 88, 299, 89, 6, 10000, 88, 3333, 4444, 5555, 6666, 7777],
        icons: iconList || [],
        datetimeparams: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true,
        },
        timeparams: {
          year: false,
          month: false,
          day: false,
          hour: true,
          minute: true,
          second: true,
        },
        modelValue: false,
        dataValue: '',
        radiolist: [
          {
            label: '托管',
            value: '1',
          },
          {
            label: '借调（借入）',
            value: '2',
          },
          {
            label: '挂靠/托管',
            value: '3',
          },
          {
            label: '融资租赁',
            value: '4',
          },
        ],
        radiolist1: [
          {
            label: '借调（3）',
            value: '3',
          },
          {
            label: '自有',
            value: '4',
          },
        ],
        fileList: [],
        defaultTime: '',
        memberType: '',
        memberType1: '3',
      }
    },
    methods: {
      nextMthClickFn() {
        this.$refs.veCalendarRef.nextMonth()
      },
      checkboxGroupChange(value) {
        console.log('checkboxGroupChange', value)
      },
      submit(ref) {
        this.$refs[ref]
          .validate()
          .then((res) => {
            console.log('success', res)
            uni.showToast({
              title: `校验通过`,
            })
          })
          .catch((err) => {
            console.log('err', err)
          })
      },
      showChange(index) {
        this.show = !index
      },
      modeChange(index) {
        this.mode = index == 0 ? 'date' : 'range'
        this.show = true
      },
      styleChange(index) {
        if (index == 0) {
          this.startText = '住店'
          this.endText = '离店'
          this.activeBgColor = '#19be6b'
          this.rangeColor = '#19be6b'
          this.rangeBgColor = 'rgba(25,190,107, 0.13)'
          this.btnType = 'success'
        } else {
          this.startText = '开始'
          this.endText = '结束'
          this.activeBgColor = '#2979ff'
          this.rangeColor = '#2979ff'
          this.rangeBgColor = 'rgba(41,121,255,0.13)'
          this.btnType = 'primary'
        }
        this.show = true
      },
      customChange(index) {
        if (index == 0) {
          this.icon1 = 'map'
          this.icon2 = 'photo'
          this.arrow = true
        } else {
          this.icon1 = ''
          this.icon2 = ''
          this.arrow = false
        }
      },
      textareaChange(index) {
        this.type = index == 0 ? 'textarea' : 'text'
      },
      change(e) {
        if (this.mode == 'range') {
          this.result = e.startDate + ' - ' + e.endDate
        } else {
          this.result = e.result
        }
      },
      onClick(ev) {
        console.log('🐳 > onClick > val: ', ev)
      },
      pickerConfirm(_, option) {
        this.form.repairName = option.label
      },
      tabsChange(val) {
        console.log('🐳 log：', val)
      },
      uploadChange(list, index) {
        console.log('🐳 log：', list, index)
      },
      uploadChangefile(list) {
        this.fileList = list
        console.log('🐳 log：', list)
      },
      //预览文件
      prefile(e) {
        let that = this
        /* #ifdef MP */
        uni.downloadFile({
          url: e,
          success: function (res) {
            setTimeout(
              () =>
                uni.openDocument({
                  filePath: e,
                  showMenu: false,
                  success: function () {
                    console.log('打开文档成功')
                  },
                  fail: function () {},
                }),
              1000,
            )
          },
          fail: function (res) {
            console.log(res) //失败
          },
        })
        /* #endif */

        /* #ifdef H5 */
        //跳转
        // uni.navigateTo({ url: url })
        /* #endif */
      },
      pickerConfirm(val, index) {
        console.log('🐳 log：', val, index)
      },
      clickBtn(val) {
        console.log('🐳 log：click', val)
      },
      searchBarSearch(val) {
        console.log('🐳 log：', val)
      },
      dateconfirm(e) {
        console.log(e)
        this.defaultTime = e
      },
      openLoading() {
        this.loadingShow = true
        setTimeout(() => {
          this.loadingShow = false
        }, 2000)
      },
      radioconfirm(item) {
        console.log('radio', item)
        this.memberType = item.value
      },
      confirm(e) {
        console.log('date', e)
      },
      showToast() {
        this.$refs.toast.show({
          title: '请输入具体行程与费用信息',
        })
      },
      showLoadingToast() {
        this.$refs.toast.showLoading()
      },
      showToast1() {
        const toastTypes = 'primary / success / error / warning / info'
        this.toastIndex = this.toastIndex || 0
        const tarr = toastTypes.split(' / ')
        this.$refs.toast.show({
          title: '请输入具体行程与费用信息',
          type: tarr[this.toastIndex],
        })
        this.toastIndex++
        if (this.toastIndex > 4) {
          this.toastIndex = 0
        }
      },
      toFormPage() {
        uni.navigateTo({
          url: '/pages/ve-ui-doc/form',
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .checkbox-box {
    display: flex;
    align-items: center;
  }
  .iconfont-box {
    display: flex;
    flex-wrap: wrap;
    .iconfont {
      font-size: 24px;
      margin-right: 12rpx;
    }
  }
  .ve-button {
    margin-bottom: 24rpx;
  }
  .doc-container {
    background: #e9f3ff;
    padding: 20rpx;
  }
  .button-view {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .card__status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    padding: 0 16rpx;
    margin-left: 16rpx;
    background: linear-gradient(58deg, #ff5b60 0%, #ff7a66 100%);
    opacity: 1;
    border: 2rpx solid #ffffff;
    border-radius: 50rpx;
  }

  .card-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .ve-button + .ve-button {
      margin-left: 24rpx;
    }
  }

  .doc-item {
    padding-bottom: 20rpx;

    .label {
      border: 1px dashed #777;
      border-radius: 3rpx;
      padding: 10rpx;
      margin-bottom: 10rpx;
    }

    .title {
      color: #1d2129;
      font-size: 30rpx;
      margin: 15rpx 0;
    }

    &.block_border {
      border: 1px solid #777;
    }
  }
</style>
